Optymalizacja wydajności JavaScript: Code Splitting kontra Leniwa ewaluacja

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Ładowanie...
}>
        
      
    

W tym przykładzie OtherComponent jest ładowany tylko wtedy, gdy jest renderowany. Podczas jego ładowania użytkownik zobaczy komunikat "Ładowanie...".

Narzędzia do dzielenia kodu

• Webpack: Popularny bundler modułów, który obsługuje różne techniki dzielenia kodu.
• Rollup: Inny bundler modułów, który koncentruje się na tworzeniu małych, wydajnych paczek.
• Parcel: Bundler o zerowej konfiguracji, który automatycznie obsługuje dzielenie kodu.
• Vite: Narzędzie do budowania, które wykorzystuje natywne moduły ES do szybkiego rozwoju i zoptymalizowanych buildów produkcyjnych.

Leniwa ewaluacja: Odroczenie obliczeń

Czym jest leniwa ewaluacja?

Leniwa ewaluacja, znana również jako odroczone wartościowanie, to technika programowania, w której ewaluacja wyrażenia jest opóźniona do momentu, gdy jego wartość jest faktycznie potrzebna. Innymi słowy, obliczenia są wykonywane tylko wtedy, gdy ich wyniki są wymagane, a nie natychmiastowo na starcie.

Wyobraź sobie, że przygotowujesz wielodaniowy posiłek. Nie gotowałbyś wszystkich dań naraz. Zamiast tego, przygotowywałbyś każde danie dopiero wtedy, gdy nadejdzie czas na jego podanie. Leniwa ewaluacja działa podobnie, wykonując obliczenia tylko wtedy, gdy ich wyniki są potrzebne.

Jak działa leniwa ewaluacja

W JavaScript leniwą ewaluację można zaimplementować za pomocą różnych technik:

• Funkcje: Opakowanie wyrażenia w funkcję pozwala odroczyć jego ewaluację do momentu wywołania funkcji.
• Generatory: Generatory zapewniają sposób na tworzenie iteratorów, które produkują wartości na żądanie.
• Memoizacja: Memoizacja polega na buforowaniu wyników kosztownych wywołań funkcji i zwracaniu zbuforowanego wyniku, gdy ponownie pojawią się te same dane wejściowe.
• Proxy: Obiekty Proxy mogą być używane do przechwytywania dostępu do właściwości i odraczania obliczania wartości właściwości do momentu faktycznego dostępu do nich.

Zalety leniwej ewaluacji

• Poprawiona wydajność: Odsuwając w czasie niepotrzebne obliczenia, leniwa ewaluacja może znacznie poprawić wydajność, zwłaszcza w przypadku dużych zbiorów danych lub złożonych obliczeń.
• Zmniejszone zużycie pamięci: Leniwa ewaluacja może zmniejszyć zużycie pamięci, unikając tworzenia wartości pośrednich, które nie są natychmiast potrzebne.
• Zwiększona responsywność: Unikając niepotrzebnych obliczeń podczas początkowego ładowania, leniwa ewaluacja może zwiększyć responsywność aplikacji.
• Nieskończone struktury danych: Leniwa ewaluacja pozwala na pracę z nieskończonymi strukturami danych, takimi jak nieskończone listy lub strumienie, poprzez obliczanie tylko niezbędnych elementów na żądanie.

Przykład: Leniwe ładowanie obrazów

Częstym przypadkiem użycia leniwej ewaluacji jest leniwe ładowanie obrazów. Zamiast ładować wszystkie obrazy na stronie od razu, można odroczyć ładowanie obrazów, które nie są początkowo widoczne w oknie przeglądarki (viewport). Może to znacznie poprawić początkowy czas ładowania strony i zmniejszyć zużycie pasma sieciowego.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Ten przykład używa API IntersectionObserver do wykrywania, kiedy obraz wchodzi w obszar widoczny. Kiedy obraz jest widoczny, jego atrybut src jest ustawiany na wartość atrybutu data-src, co powoduje załadowanie obrazu. Następnie obserwator przestaje obserwować obraz, aby zapobiec jego ponownemu załadowaniu.

Przykład: Memoizacja

Memoizację można wykorzystać do optymalizacji kosztownych wywołań funkcji. Oto przykład:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Symulacja czasochłonnych obliczeń
  for (let i = 0; i < 100000000; i++) {
    // Zrób coś
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('Pierwsze wywołanie');
console.log(memoizedCalculation(5)); // Pierwsze wywołanie - zajmuje czas
console.timeEnd('Pierwsze wywołanie');

console.time('Drugie wywołanie');
console.log(memoizedCalculation(5)); // Drugie wywołanie - zwraca natychmiast wartość z pamięci podręcznej
console.timeEnd('Drugie wywołanie');

W tym przykładzie funkcja memoize przyjmuje funkcję jako argument i zwraca jej zmemoizowaną wersję. Zmemoizowana funkcja buforuje wyniki poprzednich wywołań, dzięki czemu kolejne wywołania z tymi samymi argumentami mogą zwrócić zbuforowany wynik bez ponownego wykonywania oryginalnej funkcji.

Code Splitting vs. Leniwa ewaluacja: Kluczowe różnice

Chociaż zarówno dzielenie kodu, jak i leniwa ewaluacja są potężnymi technikami optymalizacji, dotyczą one różnych aspektów wydajności:

• Dzielenie kodu (Code Splitting): Koncentruje się na zmniejszeniu początkowego rozmiaru paczki poprzez dzielenie kodu na mniejsze fragmenty i ładowanie ich na żądanie. Jest używane głównie do poprawy początkowego czasu ładowania strony.
• Leniwa ewaluacja (Lazy Evaluation): Koncentruje się na odraczaniu obliczania wartości do momentu, gdy są one faktycznie potrzebne. Jest używana głównie do poprawy wydajności w przypadku kosztownych obliczeń lub dużych zbiorów danych.

W skrócie, dzielenie kodu zmniejsza ilość kodu, który musi być pobrany na starcie, podczas gdy leniwa ewaluacja zmniejsza ilość obliczeń, które muszą być wykonane na starcie.

Kiedy używać dzielenia kodu a kiedy leniwej ewaluacji

Dzielenie kodu

• Duże aplikacje: Używaj dzielenia kodu w aplikacjach z dużą ilością kodu JavaScript, zwłaszcza tych z wieloma ścieżkami lub funkcjami.
• Poprawa początkowego czasu ładowania: Używaj dzielenia kodu, aby poprawić początkowy czas ładowania strony i skrócić czas do interaktywności.
• Zmniejszenie zużycia pasma sieciowego: Używaj dzielenia kodu, aby zmniejszyć ilość danych, które muszą być przesyłane przez sieć.

Leniwa ewaluacja

• Kosztowne obliczenia: Używaj leniwej ewaluacji dla funkcji, które wykonują kosztowne obliczenia lub mają dostęp do dużych zbiorów danych.
• Poprawa responsywności: Używaj leniwej ewaluacji, aby poprawić responsywność aplikacji poprzez odraczanie niepotrzebnych obliczeń podczas początkowego ładowania.
• Nieskończone struktury danych: Używaj leniwej ewaluacji podczas pracy z nieskończonymi strukturami danych, takimi jak nieskończone listy lub strumienie.
• Leniwe ładowanie mediów: Zaimplementuj leniwe ładowanie dla obrazów, filmów i innych zasobów multimedialnych, aby poprawić czasy ładowania strony.

Łączenie dzielenia kodu i leniwej ewaluacji

W wielu przypadkach dzielenie kodu i leniwą ewaluację można połączyć, aby osiągnąć jeszcze większe korzyści wydajnościowe. Na przykład, można użyć dzielenia kodu, aby podzielić aplikację na mniejsze fragmenty, a następnie użyć leniwej ewaluacji do odroczenia obliczania wartości wewnątrz tych fragmentów.

Rozważmy aplikację e-commerce. Można użyć dzielenia kodu, aby podzielić aplikację na oddzielne paczki dla strony z listą produktów, strony ze szczegółami produktu i strony kasy. Następnie, na stronie ze szczegółami produktu, można użyć leniwej ewaluacji do odroczenia ładowania obrazów lub obliczania rekomendacji produktów, dopóki nie będą one faktycznie potrzebne.

Poza dzieleniem kodu i leniwą ewaluacją: Dodatkowe techniki optymalizacji

Chociaż dzielenie kodu i leniwa ewaluacja są potężnymi technikami, to tylko dwa elementy układanki, jeśli chodzi o optymalizację wydajności JavaScript. Oto kilka dodatkowych technik, których można użyć do dalszej poprawy wydajności:

• Minifikacja: Usuń niepotrzebne znaki (np. białe znaki, komentarze) z kodu, aby zmniejszyć jego rozmiar.
• Kompresja: Skompresuj kod za pomocą narzędzi takich jak Gzip lub Brotli, aby dodatkowo zmniejszyć jego rozmiar.
• Buforowanie (Caching): Wykorzystaj buforowanie przeglądarki i CDN, aby zmniejszyć liczbę żądań do serwera.
• Tree Shaking: Usuń nieużywany kod z paczek, aby zmniejszyć ich rozmiar.
• Optymalizacja obrazów: Zoptymalizuj obrazy, kompresując je, zmieniając ich rozmiar do odpowiednich wymiarów i używając nowoczesnych formatów obrazów, takich jak WebP.
• Debouncing i Throttling: Kontroluj częstotliwość wykonywania obsługi zdarzeń, aby zapobiec problemom z wydajnością.
• Wydajna manipulacja DOM: Minimalizuj manipulacje DOM i używaj wydajnych technik manipulacji DOM.
• Web Workers: Przenieś zadania intensywne obliczeniowo do web workerów, aby nie blokowały one głównego wątku.

Podsumowanie

Optymalizacja wydajności JavaScript jest kluczowym aspektem dostarczania pozytywnych doświadczeń użytkownika i osiągania celów biznesowych. Dzielenie kodu i leniwa ewaluacja to dwie potężne techniki, które mogą znacznie poprawić wydajność poprzez skrócenie początkowych czasów ładowania, zmniejszenie zużycia pasma sieciowego i odroczenie niepotrzebnych obliczeń. Rozumiejąc, jak te techniki działają i kiedy ich używać, możesz tworzyć szybsze, bardziej responsywne i przyjemniejsze aplikacje internetowe.

Pamiętaj, aby wziąć pod uwagę specyficzne wymagania swojej aplikacji i używać technik, które są najbardziej odpowiednie dla Twoich potrzeb. Ciągle monitoruj wydajność swojej aplikacji i iteruj strategie optymalizacji, aby zapewnić najlepsze możliwe doświadczenia użytkownika. Wykorzystaj moc dzielenia kodu i leniwej ewaluacji, aby tworzyć aplikacje internetowe, które są nie tylko bogate w funkcje, ale także wydajne i przyjemne w użyciu na całym świecie.

Dalsze zasoby do nauki

• Dokumentacja Webpack: https://webpack.js.org/
• Dokumentacja Rollup: https://rollupjs.org/guide/en/
• Dokumentacja Vite: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optymalizacja wykonywania JavaScript: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/